<template>
    <el-card class="announcement-board">
      <template #header>
        <span>公告栏</span>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="item in items"
          :key="item.id"
          :timestamp="item.date"
          placement="top"
        >
          <el-card>
            <div class="card-header"> <h4>{{ item.title }}</h4> <span>{{ item.personName }}</span></div>
           
            <p>{{ item.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import api from '@/api/service'
  const items = ref(null);
  api.getNotioce().then( resp =>{
     items.value = resp.list
     
  });
  </script>
  
  <style>
  .announcement-board {
    margin: 30px;
  }
  .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  </style>
  